
import { setTimeout } from 'timers';
import { setInterval } from 'timers';
<style scoped>

  #mytime{
    background: #bbb;
    color: #fff;
    display: block;
  }
  .wrapper{
    text-align: center;
    width: 60%;
    margin: 250px auto;
  }

</style>
<template>
 <!-- <div class="page">
   <button @click="initWebSocket()">websocket</button>
   <button class="button" @click="testTimes">
 {{content}}
</button>
 </div> -->

  <div class="wrapper">
    <h1 id=mytime>{{str}}</h1>
    <!-- <input id="mytime" type="text" name="" value="显示时间"> -->
    <button id="stop" name="button" @click="stop">stop</button>
    <button id="start" name="button" @click="start">start</button>
    <button id="reset" name="button" @click="reset">reset</button>
    <button><router-link to="/oneToSome">toONe</router-link></button>
  </div>

</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      websock: null,
      content: '发送验证码', // 按钮里显示的内容
      // totalTime: 60,

      h: 0, // 定义时，分，秒，毫秒并初始化为0；
      m: 0,
      s: 0,
      ms: 0,
      time: 0,
      str: '',
      mytime: ''

    }
  },
  created () {
    // this.initWebSocket()

    // if (this.testTimes) {
    //   clearTimeout(this.testTimes)
    // }
  },
  mounted: function () {
    // this.initWebSocket()
    // this.start()
  },
  methods: {
    timer () { // 定义计时函数
      this.ms = this.ms + 50 // 毫秒
      if (this.ms >= 1000) {
        this.ms = 0
        this.s = this.s + 1 // 秒
      }
      if (this.s >= 60) {
        this.s = 0
        this.m = this.m + 1 // 分钟
      }
      if (this.m >= 60) {
        this.m = 0
        this.h = this.h + 1 // 小时
      }
      this.str = this.toDub(this.h) + ':' + this.toDub(this.m) + ':' + this.toDub(this.s) + ''// +this.toDubms(this.ms)+"毫秒"
      // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
      console.log(this.s)
      if (this.s === 5) {
        console.log(111)
        this.stop()
      }
    },
    reset () { // 重置
      clearInterval(this.time)
      this.h = 0
      this.m = 0
      this.ms = 0
      this.s = 0
      this.str = '00:00:00'
    },
    start () { // 开始
      this.time = setInterval(this.timer, 50)
    },
    stop () { // 暂停
      clearInterval(this.time)
    },
    toDub (n) { // 补0操作
      if (n < 10) {
        return '0' + n
      } else {
        return '' + n
      }
    },
    toDubms (n) { // 给毫秒补0操作
      if (n < 10) {
        return '00' + n
      } else {
        return '0' + n
      }
    },

    // 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用
    created: function () {

    },

    threadPoxi () { // 实际调用的方法
      // 参数
      const agentData = 'mymessage'
      // 若是ws开启状态
      if (this.websock.readyState === this.websock.OPEN) {
        this.websocketsend(agentData)
        console.log(agentData)
      } else if (this.websock.readyState === this.websock.CONNECTING) { // 若是 正在开启状态，则等待300毫秒
        let that = this// 保存当前对象this
        setTimeout(function () {
          console.log(agentData)
          that.websocketsend(agentData)
        }, 300)
      } else { // 若未开启 ，则等待500毫秒
        this.initWebSocket()
        let that = this// 保存当前对象this
        setTimeout(function () {
          console.log(agentData)
          that.websocketsend(agentData)
        }, 500)
      }
    },
    initWebSocket () { // 初始化weosocket
      // ws地址
      // const agentData = 'message'
      const wsuri = 'ws://192.168.43.138:8989/firstProject'// process.env.WS_API + '/websocket/threadsocket'
      this.websock = new WebSocket(wsuri)
      console.log(this.websock)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onclose = this.websocketclose
      this.websock.onsend = this.websocketsend
      this.threadPoxi()
    },
    websocketonmessage (e) { // 数据接收
      // const redata = JSON.parse(e.data)
      console.log(JSON.parse(e.data))
    },
    websocketsend (agentData) { // 数据发送
      console.log(agentData)
      this.websock.send(agentData)
    },
    websocketclose (e) { // 关闭
      console.log('connection closed (' + e.code + ')')
    }
  },
  watch: {
    s () {
      if (this.s === 5) {
        console.log(1111)
      }
    }
  }
}
</script>
